<template>
  <view>
    <view class="uni-padding-wrap">
      <view class="uni-title">默认样式</view>
      <view>
        <label class="radio">
          <radio value="r1" checked="true"/>选中
        </label>
        <label class="radio">
          <radio value="r2"/>未选中
        </label>
      </view>
    </view>
    <view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
    <view class="uni-list">
      <radio-group @change="radioChange">
        <label
          class="uni-list-cell uni-list-cell-pd"
          v-for="(item, index) in items"
          :key="item.value"
        >
          <view>
            <radio :value="item.value" :checked="index === current"/>
          </view>
          <view>{{item.name}}</view>
        </label>
      </radio-group>
    </view>
  </view>
</template>
<script>
var graceChecker = require("../../graceUI/graceChecker.js");
export default {
  data() {
    return {
      items: [
        {
          value: "USA",
          name: "美国"
        },
        {
          value: "CHN",
          name: "中国",
          checked: "true"
        },
        {
          value: "BRA",
          name: "巴西"
        },
        {
          value: "JPN",
          name: "日本"
        },
        {
          value: "ENG",
          name: "英国"
        },
        {
          value: "FRA",
          name: "法国"
        }
      ],
      current: 0
    };
  },
  methods: {
    radioChange: function(evt) {
        console.log(evt.target.value);
        
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.target.value) {
          this.current = i;
          break;
        }
      }
    }
  }
};
</script>
<style>
.item-border {
  border-bottom: 1px solid #e0e0e0 !important;
}
.login-sendmsg-btn {
  border: 1px solid #00c777 !important;
  background: none !important;
  color: #00c777 !important;
  width: 100%;
  height: 35px;
  line-height: 35px;
  margin-top: 6px;
  font-size: 14px !important;
}
.grace-login-three {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}
.grace-login-three view {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 46px;
  color: #00c777;
  text-align: center;
  margin: 8px 15px;
}
</style>